<template>
  <div>
    <h3 class="userhead">用户管理</h3>
    <table class="usertable" border="1">
      <thead>
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>头衔</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="item in userList" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.username }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.title }}</td>
          <td><a href="javascript:;" @click.prevent="gotodetail(item.id)">详情</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return {
      userList: [
        { id: 1, username: '李白', age: 18, title: '诗人' },
        { id: 2, username: '老八', age: 28, title: '美食家' },
        { id: 3, username: '老六', age: 23, title: '老阴逼' },
        { id: 4, username: '张三', age: 27, title: '法外狂徒' },
        { id: 5, username: '奥里给', age: 0, title: '秘制小汉堡' },
      ]
    }
  },
  methods: {
    gotodetail (id){
      this.$router.push('/back/userinfo/' + id)
      console.log('跳转')
    }
    
  }
};
</script>

<style lang="less" scoped>
a{
  text-decoration: none;
}
.userhead {
  height: 30px;
  line-height: 30px;
  text-align: center;
  // border: 1px solid red;
}
.usertable {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  // border: 1 solid red;
}
</style>